<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>hello</title>
</head>
<body>
	<!-- 准备好容器 -->
	<div id="test1"></div>

	<!-- 引入react核心库，引入后全局多了一个React对象 -->
	<script src="../lib/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作dom，引入后全局多了一个ReactDOM对象 -->
	<script src="../lib/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script src="../lib/babel.min.js"></script>
  <!-- 引入prop-types，用于对组件标签属性进行限制，引入后全局多了一个PropTypes对象 -->
  <script src="../lib/prop-types.js"></script>

	<script type="text/babel">
		
    /*
    高阶函数:如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
      1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
      2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
      常见的高阶函数：Promise、setTImeout、arr.map等等


    函数的柯里化:通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
    */
    class Login extends React.Component{
      state = {
        userName: '',
        password: '',
      }

      render() {
        return (
          <form onSubmit={this.handleSubmit}>
            用户名：<input onChange={this.setFormData('userName')} placeholder="请输入用户名" />
            密码：<input onChange={this.setFormData('password')} placeholder="请输入密码" type="password" />
            <button>登录</button>  
          </form>
        )
      }

      setFormData = (key) => {
        return (event) => {
          this.setState({
            [key]: event.target.value
          })
        }
      }

      handleSubmit = (event) => {
        event.preventDefault();
        alert(`用户名：${this.state.userName}，密码：${this.state.password}`);
      }
    }

		// 2.渲染虚拟DOM到页面
		ReactDOM.render(<Login/>, document.getElementById('test1'));
	</script>
</body>
</html>